<script setup>
import regenerate from './child/regenerate.vue';
import { useDetailSessionStore } from '@/store'
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { getCurrentInstance, onUpdated, ref, watch } from 'vue';


const app = getApp();
const detailSessionStore = useDetailSessionStore()
const scrollTop = ref(0);
const instance = getCurrentInstance()
const flag = ref(true)


const scrollToBottom = () => {
  const query = uni.createSelectorQuery().in(instance)
  query.select('#text').boundingClientRect(data => {
    if (scrollTop.value >= data.height) {
      return
    }
    scrollTop.value = data.height;
  }).exec()

}


const send = async () => {
  detailSessionStore.chatText = ''
  const { text, type } = app.globalData._query
  const data = {
    promptTitle: type.title,
    promptType: type.type,
    promptContent: text,
  }
  detailSessionStore.sendAiCreate(data)
}

const copyFn = () => {
  uni.setClipboardData({
    data: detailSessionStore.chatText
  })
}



onUpdated(() => {
  if (flag.value) {
    flag.value = false
    setTimeout(() => {
      scrollToBottom()
      flag.value = true
    }, 350)
  }
})

const regenerateFn = () => {
  flag.value = true
  scrollTop.value = 0
  send()
}



onLoad(() => {
  send()
})

onUnload(() => {
  app.globalData._query = {}
})


</script>

<template>
  <NavBar>会话详情</NavBar>
  <div class="pageBox">
    <div class="itemBox">
      <div class="titleBox">
        <div class="leftBox">
          <i class="leftIcon"></i>
          <p class="title">
            生成结果
            <span>共{{ detailSessionStore.chatText?.length }}字</span>
          </p>
        </div>
        <div class="rightBox">
          <div class="right" @click="copyFn">
            <i class="iconfont ai-icon-copy"></i>
            <p class="closeText">复制</p>
          </div>
        </div>
      </div>
      <scroll-view :scroll-top="scrollTop" scroll-y scroll-with-animation enhanced :show-scrollbar="false"
        class="content">
        <div class="text" id="text">{{ detailSessionStore.chatText }}</div>
      </scroll-view>
    </div>
    <regenerate @regenerate="regenerateFn"></regenerate>
  </div>
  <van-toast id="van-toast"></van-toast>
</template>

<style lang="less" scoped>
.pageBox {
  padding: 0 30rpx;

  .itemBox {

    // 一级标题类
    .titleBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20rpx 0 22rpx;

      .leftBox {
        display: flex;
        align-items: center;

        .leftIcon {
          width: 12rpx;
          height: 18rpx;
          background: var(--a-main-color);
          border-radius: 6rpx;
          margin-right: 10rpx;
        }

        .title {
          font-size: 28rpx;
          color: var(--a-one-text-color);

          label {
            font-weight: 400;
            font-size: 24rpx;
            margin-left: 10rpx;
          }
        }
      }

      .rightBox {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 350rpx;

        .right {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: var(--a-main-color);

          .iconfont {
            margin-right: 6rpx;
          }

          &:first-child {
            margin-right: 20rpx;
          }
        }
      }
    }

    .content {
      box-sizing: border-box;
      padding: 24rpx;
      height: calc(100vh - 500rpx);
      line-height: 50rpx;
      border-radius: 20rpx;
      background-color: var(--a-main-box-bg-color);
      color: var(--a-one-text-color);
      font-size: 28rpx;

      .text {
        white-space: pre-wrap;
        scroll-behavior: smooth;
      }
    }
  }
}
</style>